<template>
    <div class="content" id="myToDo">
        <div class="leftPart">
            <el-card class="el-card">
                <div class="title">
                    <div>通过申请的活动</div>
                    <div class="checkMore" @click="routerPush('/myArticle/myArticleList')">查看更多</div>
                </div>
                <Mtable v-if="isShowTable" :tableColumns="articleTableColumns" :isInline="true" :tableList="articleList"
                    :count="articleListCount" :isPagination="false" :isButton="false" :tableHeight="tableHeight">
                </Mtable>
            </el-card>
            <el-card class="el-card">
                <div class="title">
                    <div>等待审批的活动</div>
                    <div class="checkMore" @click="routerPush('/myArticle/myApplyList')">查看更多</div>
                </div>
                <Mtable v-if="isShowTable" :tableColumns="approveTableColumns" :isInline="true" :tableList="approvalList"
                    :count="approvalListCount" :isPagination="false" :isButton="false" :tableHeight="tableHeight">
                </Mtable>
            </el-card>
        </div>
        <div class="rightPart">
            <el-card class="el-card">
                <div class="title">
                    <div>未处理的活动反馈</div>
                </div>
                <Mtable v-if="isShowTable" :tableColumns="feedbackTableColumns" :isInline="true" :tableList="feedbackList"
                    :count="approvalListCount" :isPagination="false" :isButton="false" :tableHeight="tableHeight">
                </Mtable>
            </el-card>
            <!-- TODO: -->
            <el-card class="el-card">
                <div class="title">
                    <div>未审批的加分文件</div>
                </div>
                <Mtable v-if="isShowTable" :tableColumns="scoreApprovalColumns" :isInline="true" :tableList="scoreApprovalList"
                    :count="approvalListCount" :isPagination="false" :isButton="false" :tableHeight="tableHeight">
                </Mtable>
            </el-card>
        </div>

        <!-- 反馈处理 -->
        <el-dialog title="反馈处理" :visible.sync="feedbackDialogVisible" width="30%">
            <div class="feedbackContent">
                <div>反馈内容：{{ feedbackContent }}</div>
                <div>
                    <div class="mg">处理建议：</div>
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="answerContent">
                    </el-input>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="feedbackDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handeleQuestion">处 理</el-button>
            </div>
        </el-dialog>

        <!-- 加分审批 -->
        <el-dialog title="加分名单" :visible.sync="showScoreListFlag" style="paddingBottom:20px;">
            <Mtable v-if="showScoreListFlag" :tableColumns="scoreCoulums" :isInline="true" :tableList="scoreList"
                :count="1000" :isPagination="false" :isButton="false" :tableHeight="'350px'">
            </Mtable>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showScoreListFlag = false">取 消</el-button>
                <el-button type="primary" v-if="scoreTeacherAccount === account || roleCode==='admin' || roleCode ==='super_admin'" @click="approvalScoreFn">通过审批</el-button>
                <el-button v-if="scoreOrganizerAccount === account || roleCode==='admin' || roleCode ==='super_admin'" type="primary" @click="addScoreFn">添加加分用户</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Mtable from '@/components/MTable/MTable.vue'
import { getArticleList, getFeedback, handleFeedback, getActScoreFile, approvalScoreList } from '@/api/article'
import { mapGetters } from 'vuex'
export default {
    name: "MyToDo",
    data () {
        return {
            tableHeight: '',
            isShowTable: false,
            isArticleMore: false,
            isApproveMore: false,
            feedbackDialogVisible: false,
            feedbackContent: '',
            answerContent: '',
            feedbackId: '',
            tableColumns: [
                { name: 'actTitle', label: '活动名称', width: '200' },
                { name: 'actTypeDetail', label: '活动类型', width: '120' },
                { name: 'organizerName', label: '创建人账号', width: '140' },
            ],
            feedbackTableColumns: [
                { name: 'actTitle', label: '活动标题', width: '200' },
                { name: 'userName', label: '反馈人', width: '120' },
                {
                    name: 'operation', label: '操作', align: "center", width: '180',
                    /**
                     * @param {Object} h 渲染函数参数对象
                     * @param {Number} index 该行下角标
                     * @param {Object} row 所在行对象
                     * @param {Object} column 所在列对象
                     * @param {Object} scope 表格项对象
                    */
                    render: (h, index, row, column, scope) => {
                        return (
                            <span>
                                <el-button icon="el-icon-s-comment" size="small" type="primary" nativeOn-click={(e) => {
                                    console.log(row)
                                    this.feedbackDialogVisible = true
                                    this.feedbackContent = row.feedback
                                    this.feedbackId = row.feedbackId
                                    e.stopPropagation() // 阻止事件冒泡，避免表格行被选中
                                }}>反馈处理</el-button>
                            </span>
                        )
                    },
                }
            ],
            scoreApprovalColumns: [
                { name: 'actTitle', label: '活动标题', width: '200' },
                { name: 'actTypeDetail', label: '活动类型', width: '120' },
                {
                    name: 'operation', label: '操作', align: "center", width: '180',
                    /**
                     * @param {Object} h 渲染函数参数对象
                     * @param {Number} index 该行下角标
                     * @param {Object} row 所在行对象
                     * @param {Object} column 所在列对象
                     * @param {Object} scope 表格项对象
                    */
                    render: (h, index, row, column, scope) => {
                        return (
                            <span>
                                <el-button icon="el-icon-s-comment" size="small" type="primary" nativeOn-click={async (e) => {
                                    this.scoreActId = row.actId
                                    this.scoreTeacherAccount = row.teacherAccount
                                    this.scoreOrganizerAccount = row.organizerAccount
                                    this.showScoreList(row.actId)
                                    // this.feedbackDialogVisible = true
                                    // this.feedbackContent = row.feedback
                                    // this.feedbackId = row.feedbackId
                                    e.stopPropagation() // 阻止事件冒泡，避免表格行被选中
                                }}>查看分数表</el-button>
                            </span>
                        )
                    },
                }
            ],
            // 表格内容
            articleList: [],
            approvalList: [],
            feedbackList: [],
            scoreApprovalList: [],
            // 表格长度
            articleListCount: 0,
            approvalListCount: 0,
            // 列表数据是否准备完
            isActicleLoading: true,
            isapproveLoading: true,

            // 加分名单
            showScoreListFlag: false,
            scoreActId: '',
            scoreTeacherAccount: '',
            scoreOrganizerAccount: '',
            scoreCoulums: [
                { name: 'userName', label: '学生名称' },
                { name: 'scoreTypeStatus', label: '加分类型' },
                { name: 'score', label: '分数' },
                { name: 'scoreApprovalStatusDesc', label: '审批状态' }
            ],
            scoreList: []
        }
    },
    components: {
        Mtable
    },
    computed: {
        ...mapGetters(['roleCode', 'name', 'account']),
        articleTableColumns () {
            let result = []
            result = this.tableColumns.concat({
                name: 'operation', label: '操作', align: "center", width: '180',
                /**
                 * @param {Object} h 渲染函数参数对象
                 * @param {Number} index 该行下角标
                 * @param {Object} row 所在行对象
                 * @param {Object} column 所在列对象
                 * @param {Object} scope 表格项对象
                */
                render: (h, index, row, column, scope) => {
                    return (
                        <span>
                            <el-button icon="el-icon-s-fold" size="small" type="primary" nativeOn-click={(e) => {
                                this.$router.push(`/article/aticleDetail/${row.actId}/1`)
                                e.stopPropagation() // 阻止事件冒泡，避免表格行被选中
                            }}>活动详细</el-button>
                        </span>
                    )
                },
            })
            console.log(result)
            return result
        },
        approveTableColumns () {
            let result = []
            result = this.tableColumns.concat({
                name: 'operation', label: '操作', align: "center", width: '180',
                /**
                 * @param {Object} h 渲染函数参数对象
                 * @param {Number} index 该行下角标
                 * @param {Object} row 所在行对象
                 * @param {Object} column 所在列对象
                 * @param {Object} scope 表格项对象
                */
                render: (h, index, row, column, scope) => {
                    return (
                        <span>
                            <el-button icon="el-icon-check" disabled={
                                !((this.account === row.teacherAccount ||
                                    this.roleCode === 'super_admin' ||
                                    this.roleCode === 'admin'
                                ) && row.approvalStatus === 0)
                            } size="small" type="success" nativeOn-click={(e) => {
                                this.$router.push(`/article/aticleDetail/${row.actId}/0`)
                                e.stopPropagation() // 阻止事件冒泡，避免表格行被选中
                            }}>活动审批</el-button>
                        </span>
                    )
                },
            })
            return result
        },
    },
    created () {
        this.getDataList()
    },
    mounted () {
        this.tableHeight = document.getElementById('myToDo').offsetHeight * 0.38 + 'px'
        this.isShowTable = true
        console.log(this.tableHeight)
    },
    methods: {
        async getDataList () {
            const data = []
            for (let i = 0; i < 2; i++) {
                let searchData = {
                    approvalStatus: i,
                    limit: 10,
                    offect: 1,
                }
                if (i === 0) {
                    if (this.roleCode === 'super_admin' || this.roleCode === 'admin') {
                    } else if (this.roleCode === 'teacher') {
                        searchData.teacherAccount = this.account
                    } else {
                        searchData.organizerAccount = this.account
                    }
                    data[i] = await getArticleList(searchData)
                } else if (i === 1) {
                    if (this.roleCode === 'super_admin' || this.roleCode === 'admin') {
                    } else if (this.roleCode === 'teacher') {
                        searchData.teacherAccount = this.account
                    } else {
                        searchData.organizerAccount = this.account
                    }
                    data[i] = await getArticleList(searchData)
                }
            }
            let searchData = {
                scoreApprovalStatus: 0,
                approvalStatus: 1,
                endTime: 1,
                limit: 100,
                offect: 1,
            }
            if (this.roleCode === 'super_admin' || this.roleCode === 'admin') {
            } else if (this.roleCode === 'teacher') {
                searchData.teacherAccount = this.account
            } else {
                searchData.organizerAccount = this.account
            }

            const res = await getArticleList(searchData)
            this.scoreApprovalList = res.data.resList
            console.log(this.scoreApprovalList)

            this.feedbackList = await getFeedback({
                isHandled: 0,
                organizerAccount: this.account
            })

            this.approvalList = data[0].data.resList
            this.articleList = data[1].data.resList
            this.feedbackList = this.feedbackList.data
        },
        routerPush (param) {
            this.$router.push(param)
        },
        handeleQuestion () {
            handleFeedback({
                handleOpinion: this.answerContent,
                feedbackId: this.feedbackId
            }).then(res => {
                this.feedbackDialogVisible = false
            }).catch(err => {
                console.log(err)
            })
        },
        // 加分名单
        async showScoreList (actId) {
            // 请求活动的加分名单
            const res = await getActScoreFile(actId)
            this.scoreList = res.data
            console.log(res)
            this.showScoreListFlag = true
        },
        // 加分名单通过审批
        async approvalScoreFn () {
            const res = await approvalScoreList(this.scoreActId)
            if (res.hasOk) {
                this.$message.success('审批成功')
                this.showScoreList(this.scoreActId)
                this.showScoreListFlag = false
            } else {
                this.$message.error(res.message)
            }
        },

        // 添加加分用户
        addScoreFn () {
            this.$router.push(`/article/aticleDetail/${this.scoreActId}/1`)
        }
    },
}
</script>

<style lang="scss" scoped>
.content {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .el-card {
        width: 100%;
    }
    .title {
        height: 30px;
        font-size: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .checkMore {
            font-size: 14px;
            color: #7fb2f1;
            cursor: pointer;
            // height: 48px;
            // width: 100%;
            // box-sizing: border-box;
            // border: 1px solid rgba(0, 0, 0, 0.2);
            // border-top: none;
            // display: flex;
            // justify-content: center;
            // align-items: center;
        }
    }

    .leftPart {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .rightPart {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .feedbackContent {
        .mg {
            margin-top: 20px;
            margin-bottom: 10px;
        }
    }
}
</style>